<template>
  <div class="card">
    <el-card class="cardItem">
      <div class="avatar" @click="$router.push('/home/about')">
        <el-image style="width: 110px ; height: 110px"
          :src="$store.state.centerData[0] ? $store.state.UrlBase + $store.state.centerData[1].adminAvatar :''"
          fit="cover" />
      </div>
      <h4> {{$store.state.centerData[0]? $store.state.centerData[0].uname :''}}</h4>
      <p class="motto"> {{$store.state.centerData[0]? $store.state.centerData[0].motto :''}}
      </p>
      <div class="cardDetails">
        <div class="item">
          <h5>文章</h5>
          <p>{{articleAllNum}}</p>
        </div>
        <div class="item" @click="$router.push('/home/classify')">
          <h5>分类</h5>
          <p>{{LabelAllNum}}</p>
        </div>
        <div class="item" @click="$router.push('/talk')">
          <h5>动态</h5>
          <p>{{talkAll}}</p>
        </div>
      </div>
      <a class="bookmark" @click="openBookMark">
        <div class="bookitem">
          <el-icon>
            <Management />
          </el-icon>
          加入书签
        </div>
      </a>
      <div class="callMy">
        <!-- 电话 -->
        <div @click="callMy($store.state.centerData[0]? '电话: ' + $store.state.centerData[0].tel :'')"><svg
            t="1667017472629" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="15354" width="25" height="25">
            <path
              d="M65.771 502.182c0 246.632 199.937 446.566 446.57 446.565 246.613 0 446.549-199.934 446.551-446.565 0-246.633-199.936-446.549-446.55-446.55-246.635 0.001-446.57 199.917-446.571 446.55z m651.885-173.77c31.489 31.473 1.642 148.828-114.292 264.773C487.396 709.131 370.06 738.929 338.589 707.492c-27.278-27.315-74.96-60.574-12.892-110.423 62.087-49.886 79.429-25.343 107.582 2.772 19.674 19.711 69.436-21.368 112.394-64.328 42.94-42.996 83.986-92.719 64.368-112.43-28.155-28.153-52.679-45.511-2.792-107.562 49.904-62.049 83.125-14.405 110.406 12.891z"
              p-id="15355"></path>
          </svg>
        </div>
        <div @click="callMy($store.state.centerData[0]?'微信: '+ $store.state.centerData[0].wechat :'')">
          <svg t="1667017401161" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="9740" width="25" height="25">
            <path
              d="M512 1024C229.23 1024 0 794.77 0 512S229.23 0 512 0s512 229.23 512 512-229.23 512-512 512z m107.91-626.371H640c-20.09-94.744-115.566-162.962-225.304-162.962-124.002 0-222.696 86.04-222.696 198.607 0 65.097 34.572 115.492 89.43 156.94l-23.114 71.12 77.995-41.448a354.748 354.748 0 0 0 77.97 11.8h20.114a133.608 133.608 0 0 1-5.851-47.47 193.122 193.122 0 0 1 57.466-134.412 181.37 181.37 0 0 1 133.096-52.175h0.804z m-115.273-56.296c15.848 0 28.696 14.288 28.696 31.915s-12.848 31.915-28.696 31.915c-17.652 1.95-33.402-12.313-35.304-31.94 0-22.284 17.457-31.89 34.719-31.89h0.585z m-171.032 63.878c-17.555 1.463-33.012-12.653-34.938-31.89 1.926-19.212 17.383-33.329 34.938-31.89 16.042 0 29.062 14.287 29.062 31.915 0 17.603-13.02 31.89-29.062 31.89zM832 574.805c0-92.233-90.136-169.472-192-169.472-107.764 0-192 77.24-192 169.448 0 92.257 84.456 169.496 192 169.496a264.24 264.24 0 0 0 66.828-11.873L767.586 768l-17.408-59.538c49.42-35.596 81.017-83.286 81.017-133.852l0.805 0.195zM573.562 554.52c-10.435 0-18.895-9.484-18.895-21.187s8.46-21.211 18.895-21.211c11.727-1.39 22.308 7.997 23.771 21.114-1.39 13.214-11.97 22.698-23.771 21.284z m128 0.098c-10.435 0-18.895-9.509-18.895-21.212 0-11.751 8.46-21.26 18.895-21.26 11.727-1.414 22.308 7.997 23.771 21.139-2.194 12.921-12.58 22.04-24.259 21.333h0.488z"
              p-id="9741"></path>
          </svg>
        </div>
        <div @click="callMy($store.state.centerData[0]?'qq: '+ $store.state.centerData[0].qq :'')"><svg
            t="1667017538487" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="17039" width="25" height="25">
            <path
              d="M512 0c282.768 0 512 229.232 512 512 0 282.768-229.232 512-512 512C229.232 1024 0 794.768 0 512 0 229.232 229.232 0 512 0z m5.328 240.064c-96-2.72-173.328 73.44-176 171.344v54.4S272 637.12 272 658.88c0 35.36 10.672 35.36 21.328 24.48l45.344-46.24v10.88A169.488 169.488 0 0 0 384 737.776c-21.328 10.88-56 24.48-56 46.224h368c0-24.48-34.672-35.36-58.672-46.24 26.672-21.76 42.672-54.4 45.344-89.744v-13.6s10.656 13.6 45.328 46.24c13.328 13.6 24 13.6 24-21.76 0-20.976-64.48-181.04-69.072-192.448l-0.256-0.64v-57.12C680 316.208 608 242.784 517.328 240.064z"
              p-id="17040"></path>
          </svg></div>
      </div>
    </el-card>
  </div>
</template>
<script>
import { reactive, toRefs, onMounted } from 'vue'
import http from '@/utils/http.js'
import { ElNotification } from 'element-plus'
export default {
  setup () {
    const data = reactive({
      articleAllNum: 0,
      LabelAllNum: 0,
      talkAll: 0
    })
    onMounted(() => {
      http.get('/endIndex').then(res => {
        data.articleAllNum = res.data.articleAllNum
        data.LabelAllNum = res.data.LabelAllNum
        data.talkAll = res.data.talkAll
      })
    })
    const openBookMark = function () {
      ElNotification({
        title: '书签',
        message: '按CTRL+D 键将本页加入书签',
        duration: 2000,
      })
    }
    const callMy = function (message) {
      ElNotification({
        dangerouslyUseHTMLString: true,
        message: `<div style="color:#49b1f5">${message}</div>`,
        duration: 2000,
        offset: 100,
      })
    }
    return {
      ...toRefs(data),
      openBookMark,
      callMy
    }
  }
}
</script>
<style lang="scss" scoped>
.card {
  position: sticky;
  top: 10px;
  letter-spacing: 10px;
  width: 280px;
}
.cardDetails {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  .item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    letter-spacing: 0px;
    padding: 10px 0;
    cursor: url(https://static.talkxj.com/css/pointer.cur), default;
    h5 {
      font-size: 14px;
      padding: 10px;
      color: #4c4948;
    }
    p {
      font-weight: 700;
    }
  }
}
.cardItem {
  text-align: center;
  color: #4c4948;
  border-radius: 10px;
  h4 {
    margin: 10px 0 5px 0;
    font-size: 20px;
    font-weight: 700;
  }
  .motto {
    font-size: 12px;
    color: #888;
    width: 100%;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .bookmark {
    position: relative;
    display: block;
    color: #fff;
    background: #49b1f5;
    height: 32px;
    line-height: 32px;
    transition: all 1s;
    letter-spacing: 3px;
    overflow: hidden;
    &::after {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      content: "";
      width: 100%;
      height: 100%;
      background: #ff7242;
      transform: translateX(-100%);
      transition: 1s all;
    }
    .bookitem {
      position: relative;
      z-index: 2;
    }
    i {
      transform: translateY(2px);
    }
    &:hover {
      letter-spacing: 5px;
      &::after {
        transform: translate(0);
      }
    }
  }
  .callMy {
    display: flex;
    margin: 15px 0;
    justify-content: center;
    div {
      margin: 0 15px;
      cursor: url(https://static.talkxj.com/css/pointer.cur), default;
    }
  }
  .avatar {
    transition: all 1s;
  }
  .avatar:hover {
    transform: rotate(360deg);
  }
}
</style>